<template>
  <div class="adminyijianfankui">
    <admin_top></admin_top>
    <div style="border-bottom: 1px solid #D7D7D7 ;width: 95%;margin-left: auto;margin-right: auto;background-color: white;">
			<div class="t_type_title">
				<div style="width: 300px;">一级分类</div>
				<div style="width: 350px;">二级分类</div>
				<div>三级分类</div>
			</div>
			<div v-for="item in lists2" :name="item.id"  :key="item.id" v-if="item.id == 106?false:true"  class="t_one_ji" >
			<div class="t_one_ji_item" >
				<input @blur="changeqx(item.id,item.sort,item.name,item.code,item.parent_id)" style="width: 30px;margin-right: 10px;" v-model="item.sort"  />
				<input @blur="changeqx(item.id,item.sort,item.name,item.code,item.parent_id)" style="width: 150px;"  v-model="item.name" />
				<el-button @click="changepart(item)" size="mini" type="primary" icon="el-icon-coin" circle style="margin-left: 10px;"></el-button>

			</div>
			<div style="border-left: 1px solid #D7D7D7;width: calc(100% - 300px);">
					<div v-if="item.data.length!=0" v-for="item2 in item.data"   :key="item2.id" class="t_twoandthree" style="display: flex;">
						<div class="t_two_ji">
							<input @blur="changeqx(item2.id,item2.sort,item2.name,item2.code,item2.parent_id)" style="width: 30px;margin-right: 10px;" v-model="item2.sort" />
							<input @blur="changeqx(item2.id,item2.sort,item2.name,item2.code,item2.parent_id)" style="width: 200px;" v-model="item2.name" />
							<el-button @click="changepart(item2)" size="mini" type="primary" icon="el-icon-coin" circle style="margin-left: 10px;"></el-button>
						</div>
						<div class="t_three_ji" >
								<div class="t_three_ji_item" v-for="item3 in item2.data"  :key="item3.id">
                  					<input @blur="changeqx(item3.id,item3.sort,item3.name,item3.code,item3.parent_id)" style="width: 200px;" v-model="item3.name" />
									<el-button @click="changepart(item3)" size="mini" type="primary" icon="el-icon-coin" circle style="margin-left: 10px;"></el-button>
								</div>
							
						</div>
					</div>
					<div v-if="item.data.length==0" class="t_twoandthree" style="height: 100%;">
						<div class="t_two_ji" style="height: 100%;border-right:1px solid #D7D7D7;"></div>
					</div>
			</div>
		</div>
		</div>
		<!-- 选择层级 -->
		<el-dialog
			title="修改层级"
			:visible.sync="isshowcj"
			width="500px"
			:close-on-click-modal="false">
			<div class="t_pick_box">
				<div class="t_pick_title">请选择所属一级</div>
				<el-select @change="choosecj(1)" size="small" style="width: 100%;" v-model="value1" placeholder="请选择">
					<el-option
					v-for="item in options1"
					:key="item.id"
					:label="item.label"
					:value="item.id">
					</el-option>
				</el-select>
			</div>
			<div class="t_pick_box">
				<div class="t_pick_title">请选择所属二级</div>
				<el-select @change="choosecj(2)" size="small" style="width: 100%;" v-model="value2" placeholder="请选择">
					<el-option
					v-for="item in options2"
					:key="item.id"
					:label="item.label"
					:value="item.id">
					</el-option>
				</el-select>
			</div>
			<div class="t_pick_box">
				<div class="t_pick_title">请选择所属三级</div>
				<el-select @change="choosecj(3)" size="small" style="width: 100%;" v-model="value3" placeholder="请选择">
					<el-option
					v-for="item in options3"
					:key="item.id"
					:label="item.label"
					:value="item.id">
					</el-option>
				</el-select>
			</div>
			<div style="text-align: center;">
				<el-button round @click="isshowcj = false">取 消</el-button>
				<el-button style="background-color: #2974FF;" round type="danger" @click="surechange">确 定</el-button>
			</div>
		</el-dialog>

  </div>
</template>

<script>
  import admin_top from './top.vue';
  import axios from 'axios'
  export default {
    components: {
      admin_top
    },
    name: 'adminyijianfankui',
    data() {
      return {
        lists2:{},
		checkList:[],
		isshowcj:false,
		options1: [],
        value1: '',
		options2: [],
        value2: '',
		options3: [],
        value3: '',
		nowchoose:{},
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      
    },
    mounted(){
			this.getlists2()
		},
    methods: {
      //获取功能列表
		getlists2:function(){
			axios.get('/api/functions/lists?new=1')
				.then(response => {
					this.lists2 = response.data.data

					this.lists2.forEach((item,index)=>{
						if(item.name == '产品销售中心'){
						this.lists2.splice(index,1)
						}
					})

					console.log('权限列表')
					console.log(this.lists2)

					this.options1=[]
					this.options2=[]
					this.options3=[]
					this.value1=''
					this.value2=''
					this.value3=''


					for(let i=0;i<this.lists2.length;i++){
						//一级
						if(this.lists2[i].id!=106){
							this.options1.push({
								value:this.lists2[i].parent_id,
								label:this.lists2[i].name,
								id:this.lists2[i].id,

							})
							for(let j=0;j<this.lists2[i].data.length;j++){
								//二级
								this.options2.push({
									value:this.lists2[i].data[j].parent_id,
									label:this.lists2[i].data[j].name,
									id:this.lists2[i].data[j].id,
								})
								//三级
								for(let k=0;k<this.lists2[i].data[j].data.length;k++){
									this.options3.push({
										value:this.lists2[i].data[j].data[k].parent_id,
										label:this.lists2[i].data[j].data[k].name,
										id:this.lists2[i].data[j].data[k].id,
									})
								}
							}
						}
						
						
					}

					console.log('this.options1')
					console.log(this.options1)
					console.log('this.options2')
					console.log(this.options2)
					console.log('this.options3')
					console.log(this.options3)
		
				})
		},
		//修改层级
		changepart(row){
			this.isshowcj=true
			this.nowchoose = row
			this.value1 = ''
			this.value2 = ''
			this.value3 = ''
		},
		//选择层级
		choosecj(type){
			console.log(type)
			if(type==1){
				this.value2 = ''
				this.value3 = ''
			}
			if(type==2){
				this.value1 = ''
				this.value3 = ''
			}
			if(type==3){
				this.value1 = ''
				this.value2 = ''
			}
		},
		//确定修改
		surechange(){
			if(this.value1==''&&this.value2==''&&this.value3==''){
				this.$message.error('请选择层级!');
				return
			}
			if(this.value3){
				this.$message.error('暂不支持选择第三级');
				return
			}

			var nowparent_id = ''
			if(this.value1){
				nowparent_id = this.value1
				// for(let i=0;i<this.options1.length;i++){
				// 	if(this.options1[i].id==this.value1){
				// 		nowparent_id = this.options1[i].value
				// 	}
				// }
			}else if(this.value2){
				nowparent_id = this.value2
				// for(let i=0;i<this.options2.length;i++){
				// 	if(this.options2[i].id==this.value2){
				// 		nowparent_id = this.options2[i].value
				// 	}
				// }
			}else{
				nowparent_id = this.value3
				// for(let i=0;i<this.options3.length;i++){
				// 	if(this.options3[i].id==this.value3){
				// 		nowparent_id = this.options3[i].value
				// 	}
				// }
			}

			this.changeqx(this.nowchoose.id,this.nowchoose.sort,this.nowchoose.name,this.nowchoose.code,nowparent_id)

		},
      //修改权限
      changeqx(id,sort,name,code,parent_id){
        console.log(id,sort)
        axios.post('/api/functions/update', {
          id:id,
          sort:sort,
          name:name,
          code:code,
          parent_id:parent_id
        })
				  .then(response => {
						if(response.data.msg.code == 0){
							this.$message({
								type: 'success',
								message: '修改成功!'
							});
							this.getlists2()
							this.isshowcj=false
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
      },
   









		
	
    }
      

  }
</script>

<style scoped>
   .adminyijianfankui {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
    padding-bottom: 30px;
  }
  .t_all_box{
	background-color: white;
	padding: 30px;
}
.t_one_ji{
	border: 1px solid #D7D7D7;
	border-bottom:none;
	display: flex;
}

.t_two_ji{
	width: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F2F8FF;
	color: #434343;
}
.t_twoandthree{
	border-bottom:1px solid #D7D7D7;
}

.t_twoandthree:last-child{
	border-bottom: none;
}
.t_three_ji{
	border-left:1px solid #D7D7D7;
	width: calc(100% - 350px);
	min-height: 80px;
	display: flex;
	flex-wrap: wrap;
}
.t_three_ji_item{
	margin: 20px;
	display: flex;
	align-items: center;
	color: #434343;
}
.t_checkinput{
	margin-top: 0 ;
}
.t_one_ji_item{
	width: 300px;
	display:flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	background-color: #F2F8FF;
	color: #434343;
	
}
.t_type_title{
	display: flex;
	border: 1px solid #D7D7D7;
	background-color: #F6F6F6;
	border-bottom: none;
}
.t_type_title div{
	padding: 5px 10px;
	box-sizing: border-box;
	color: #434343;
}
/deep/ .t_one_ji_item input,.t_two_ji input,.t_three_ji_item input{
  border-color:#D8EAFF;
  border-radius: 3px;
  border-width: 1px;

}
/deep/ .el-button--mini.is-circle{
	padding: 4px;
}
.t_pick_title{
	color: #020C1D;
	margin-bottom: 10px;
}
.t_pick_box{
	margin-bottom: 20px;
}
</style>
